<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
<input type="text" name="username" placeholder="请输入用户名">
<input type="text" name="password" placeholder="请输入密码">
<button>搜索</button>
<button>添加用户</button>
<table width="800px" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>序号</th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${users.list}" var="user" varStatus="status">
        <tr>
            <td>${status.count}</td>
            <td>${user.id}</td>
            <td>${user.username}</td>
            <td>${user.password}</td>
            <td>
                <a href="user/${user.id}">修改</a>
                <a href="javascript:void(0)" onclick="delUser(${user.id})">删除</a>
            </td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="5">
            <c:if test="${users.hasPreviousPage}">
                <a href="user?pn=${users.prePage}">上一页</a>
            </c:if>
            <c:if test="${!users.hasPreviousPage}">
                <span>上一页</span>
            </c:if>

            <c:forEach items="${users.navigatepageNums}" var="pageNum">
                <c:if test="${pageNum == users.pageNum}">${pageNum}</c:if>
                <c:if test="${pageNum != users.pageNum}">
                    <a href="user?pn=${pageNum}">${pageNum}</a>
                </c:if>
            </c:forEach>

            <c:if test="${users.hasNextPage}">
                <a href="user?pn=${users.nextPage}">下一页</a>
            </c:if>
            <c:if test="!${users.hasNextPage}">
                <span>上一页</span>
            </c:if>

        </td>
    </tr>
</table>

<script>
    function delUser(id) {
        event.preventDefault(); // 阻止默认事件
        if (confirm("确定要删除吗？")) {
           fetch("user/" + id, {
               method: "DELETE"
           }).then(function (res) {
               if (res.ok) {
                   location.reload()
               }
           });
        };
    }
</script>
</body>
</html>